<template>
	<view style="width: 100%;">
		<view class="tab-flex">
			<block v-for="(item,index) in tabList" :key="index">
				<view :class="[
					index == tab ? 'active' : '',
					index == 0 && tab == 0 ? 'activeBk' : '',
					index == 1 && tab == 1 ? 'active1' : ''
				]" class="tab-content" @click="changeTab(index)">
					<view class="tab-text flex_hcneter">
						{{item}}
						<view v-if="index == 0" 
						@click.stop="tishi"
						style="display: inline-block;height: 28rpx;margin-left: 10rpx;">
							<u-image
							class="flex_hcneter"
							border-radius="50%"
							width="32rpx"
							height="32rpx" 
							src="/static/comm/tishi.png"></u-image>
						</view>
					</view>
					<!-- 下划线 -->
					<view v-if="tab == index" class="tab-hr"></view>
					<!-- 提示框  -->
					<!-- <view class="tabs-tips-cont" catchtap="tabsTips" wx:if="{{index == 0}}">
						<image class="tabs-tips" src="../../images/home/new/tips.png" />
					</view> -->
					
				</view>
			</block>
		</view>
		
		<tipsPop ref="tipsPop"
		:popShow="popShow" 
		@close="popShow = false"></tipsPop>
	</view>
</template>
<script>
	import tipsPop from '@/components/tipsPop/index.vue';
	export default {
		components: {
		  tipsPop,
		},
		props: {
			tabList: { //滚动的距离
				type: [Array],
				default: () => {
					return []
				}
			},
		},

		data() {
			return {
				popShow:false,
				tab: 0
			}
		},
		mounted() {},
		methods: {
			tishi(){
				this.popShow = true
			},
			
			changeTab(e) {
				this.tab = e
				this.$emit('clickTab', e)
			},
		},
	};
</script>
<style lang="less" scoped>
	
	.tab_icon{background-color: #008BFF;border-radius: 50%;color: #fff;}
	.tab-text{
		uni-image,image,img{vertical-align: top;}
	}
	.tab-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #303030;
		background-color: #E4F0FF;
		height: 68rpx;
	}

	.tab-content {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		border: 68rpx solid;
		border-right: 24rpx solid;
		border-left: 24rpx solid;
		border-color: transparent;
		border-top: none;

	}

	.activeBk {
		border: 68rpx solid;
		border-right: 70rpx solid;
		border-left: 24rpx solid;
		border-color: #ffffff;
		color: #303030;
		border-top: none;
		border-right-color: transparent;
	}

	.tab-text {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 10rpx;
	}

	.active .tab-hr {
		height: 6rpx;
		background: #0086FF;
		width: 102rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		position: absolute;
		bottom: -68rpx;
	}

	.active1 {
		border: 68rpx solid;
		border-right: 24rpx solid;
		border-left: 70rpx solid;
		border-color: #ffffff;
		color: #303030;
		border-top: none;
		border-left-color: transparent;
	}

	.tabs-tips {
		width: 28rpx;
		height: 28rpx;
	}

	.tabs-tips-cont {
		position: absolute;
		top: 10px;
		/* right: calc(50% + 50rpx); */
		right: 0;
		width: 50rpx;
		height: 50rpx;
		z-index: 1;
		display: flex;
		justify-content: center;
	}
</style>